<template>
	<view id="">
		<tui-tips ref="toast" v-if="index==0"></tui-tips>
		<tui-drawer mode="right" :visible="isopen">
			<headNav @close="closeOpen" @showTips="showTips"></headNav>
		</tui-drawer>
		<view class="page affiliate_dashboard_page affiliate_page">
			<view class="page_header">

				<view class="header_center">
					<topWallet :connect="hasToken" @onOpen="openModel"></topWallet>

					<view class="golden-title"><text>商城购物</text></view>
				</view><button class="menu_btn" @click="navs('showLeft')">
					<image src="/static/images/common/menu.svg" mode="widthFix">
				</button>
			</view>

			<navigator url="/share_links" @click="showDialog">
				<view class="add_link_btn">{{$t('Generate-Link')}}</view>
			</navigator>
			<view class="bottom box-container">
				<view class="tui-box">
					<tui-list-cell :arrow="true" unlined :radius="true" class="tui-boxs">
						<view class="tui-address">
							<view v-if="address" @click="addressList">
								<view class="tui-userinfo">
									<text class="tui-name">{{address.addressee}}</text>{{address.mobile}}
								</view>
								<view class="tui-addr">

									<text>{{address.address}}</text>
								</view>
							</view>
							<view class="tui-none-addr" v-else @click="chooseAddr">
								<!-- <image src="/static/images/index/map.png" class="tui-addr-img" mode="widthFix"></image> -->
								<text>选择收货地址</text>
							</view>
						</view>
						<!-- <view class="tui-bg-img"></view> -->
					</tui-list-cell>
					<view class="tui-top tui-goods-info">
						<tui-list-cell :hover="false" :lineLeft="false" class="tui-boxs">
							<view class="tui-goods-title">
								商品信息
							</view>
						</tui-list-cell>
						<view>
							<block>
								<block v-for="(item,index) in products.order_goods_list" :key="index">
									<tui-list-cell :hover="false" padding="0" class="tui-boxs">
										<view class="tui-goods-item">
											<image :src="item.pic_cover_small" class="tui-goods-img"></image>
											<view class="tui-goods-center">
												<view class="tui-goods-name">{{item.goods_name}}</view>
												<view class="tui-goods-attr">{{item.sku_name}}</view>
											</view>
											<view class="tui-price-right">
												<view>￥{{item.promote_price}}</view>
												<view>x{{item.buy_num}}</view>
											</view>
										</view>
									</tui-list-cell>
								</block>
							</block>
						</view>




						<tui-list-cell :hover="false" v-if="products.total_point>=1" class="tui-boxs">
							<view class="tui-padding tui-flex">
								<view>PXL抵扣总额</view>
								<view class="coin-nums">{{products.total_point}}PXL</view>
							</view>
						</tui-list-cell>
						<tui-list-cell :hover="false" class="tui-boxs">
							<view class="tui-padding tui-flex">
								<view>商品总额</view>
								<view>{{totalPrices}}</view>
							</view>
						</tui-list-cell>
						<tui-list-cell :hover="false" class="tui-boxs">
							<view class="tui-padding tui-flex">
								<view>配送费</view>
								<view>{{shipping_fee}}</view>
							</view>
						</tui-list-cell>
						<tui-list-cell :hover="false" :lineLeft="false" padding="0" class="tui-boxs">
							<view class="tui-remark-box tui-padding tui-flex">
								<view>订单备注</view>
								<input type="text" class="tui-remark" placeholder="选填: 请先和商家协商一致"
									placeholder-class="tui-phcolor"></input>
							</view>
						</tui-list-cell>
						<tui-list-cell :hover="false" unlined class="tui-boxs">
							<view class="tui-padding tui-flex tui-total-flex">
								<view class="tui-flex-end tui-color-red">
									<view class="tui-black">合计： </view>
									<view class="tui-size-26"></view>
									<view class="tui-price-large">{{totalPriceArr}}</view>
								
								</view>
							</view>
						</tui-list-cell>
					</view>
				</view>
				<view class="tui-safe-area"></view>
				
				<view class="tui-addr-save">
					<tui-button shadow type="warning" height="88rpx" shape="circle"
						@click="btnPay">确认支付</tui-button>
				</view>

			</view>
		</view>
		<!-- wallet_pop-->
		<walletPop :walletOpen="open_wallet" :walletModelOpen="open_wallet" @closeWallet="closePop"
			@showTips="showTips"></walletPop>
		<tui-tips ref="toast" position="center"></tui-tips>
		<view v-if="showTabbar">
			<tui-tabbar :current="current" @click="tabbarSwitch" backdropFilter :backgroundColor="backgroundColor"
				:tabBar="tabBar" color="#777" selectedColor="#f4d56f"></tui-tabbar>
		</view>

	</view>
</template>

<script>
	import headNav from "@/components/nav/head_nav.vue"
	import topWallet from "@/components/nav/top_wallet.vue"
	import walletPop from "@/components/nav/wallet_pop.vue"
	export default {
		components: {
			headNav,
			topWallet,
			walletPop
		},
		data() {
			return {
				hasCoupon: true,
				insufficient: false,
				show: false,
				shows: false,
				shopsMsg: '',
				shopsMsgs: '',
				address: 0,
				products: [{
					pic_cover_small: ''
				}],
				buyer_message: '',
				address_id: '',
				pickupaddress: '',
				totalFee: '',
				totalPrice: '',
				defaultAddress: '0',
				balance: '',
				isDoRefresh: '',
				shipping_fee: '',
				method: '',
				out_trade_no: '',
				isAddressId: '',
				red_balance: '',
				cart: false,
				cart_arr: '',
				total_delivery_money: '',
				iconOpcity: 0.5,
				showPurse: false,
				isopen: false,
				bannerIndex: '',
				showLink: false,
				hasToken: false,
				open_wallet: false,
				teamData: '',
				current: 3,



				totalFee: '',
				totalPrice: '',
				totalPrices: '',
				totalPriceArr: [],
				defaultAddress: '0',
				shipping_fee: '',
				showTabbar: true,
				backgroundColor: '#191c1d',

				tabBar: [{
						pagePath: '/pages/dashboard/faq',
						text: this.$t('question'),
						iconPath: '/static/images/common/eb2ad3e9f15cd5c45523.svg',
						selectedIconPath: '/static/images/common/faq.png',
						verify: true
					},
					{
						pagePath: '/pages/dashboard/share_links',
						text: this.$t('Promotion-link'),
						iconPath: '/static/images/common/1c328bea0664621ae940.svg',
						selectedIconPath: '/static/images/common/2ddef14ffefdf0893c68.svg',

						verify: true
					},
					{
						pagePath: '/pages/dashboard/share_report',
						text: this.$t('Income-statement'),
						iconPath: '/static/images/common/27ef8eecf3261b27000a.svg',
						selectedIconPath: '/static/images/common/e71ec10e6a3c2f14b631.svg',
						verify: true
					},
					{
						pagePath: '/pages/dashboard/dashboard',
						text: this.$t('control-panel'),
						iconPath: '/static/images/common/e5eb47a4e075e5a7a1e6.svg',
						selectedIconPath: '/static/images/common/0713c468a0e288a09478.svg',
						verify: true
					}
				],
				noClick: false,
				spec_list: '',
				subIndex: [],
				shopsMsgs: '',
				index: 0


			};
		},
		onLoad: function(options) {

			if (options.shopsMsg) {
				this.hasToken=true
					this.shopsMsgs = options.shopsMsg
					this.shopsMsg = JSON.parse(options.shopsMsg);
					this.init()
				

			}
		},
		onShow() {

		},
		methods: {
			init() {
				let datas = {
					is_default: this.tui.getAddressId() ? 0 : 1,
					address_id: this.tui.getAddressId()
				};
				let address = this.tui.request('api/user/address', 'post', datas, 1000, 1, '', 'address');
				Promise.resolve(address).then((value) => {
					if (value.code == 200) {
						if (value.data) {
							this.defaultAddress = value.data
							this.address = value.data;

						}
					} else {
						uni.navigateTo({
							url: "/pages/shop/address"
						})
						this.tui.toast(value.message);
					}
				})
				let obj = {

				}

				let gid_num_sku = this.shopsMsg.gid_num_sku.split(":");
				obj.buy_info = gid_num_sku[0] + ":" + gid_num_sku[1]
				obj.shipping_type = this.shipping_type

				obj.address_id = this.defaultAddress.id
				let orders = this.tui.request('api/order/buyNow', 'post', obj, 1000, 1, '', 'buyNow');
				Promise.resolve(orders).then((value) => {
					if (value.code == 200) {
						this.products = value.data;
						this.totalPrice = parseInt(this.products.total_order_price) + parseInt(this.products
							.total_express_fee);
						this.totalPrices = this.products.total_order_price + parseInt(this.products.total_express_fee)
						
						let priceStr = this.totalPrices.toString();
						this.totalPriceArr = priceStr;

						this.total_express_fee = parseInt(this.products.total_express_fee);
						if (this.products.point_exchange_type == 1) {
							this.totalFee = parseInt(this.products.price) + parseInt(this.products
								.total_express_fee);
						}
					} else {
						this.tui.toast(value.message);
					}
				})
			},
			tabbarSwitch(e) {

				this.current = e.index;

			},
			btnPay() {

				let obj = {

				}
				let gid_num_sku = this.shopsMsg.gid_num_sku.split(":");
				obj.sku_id = gid_num_sku[0];
				obj.num = gid_num_sku[1];
				obj.address_id = this.defaultAddress.id;
				obj.buy_info = gid_num_sku[0] + ":" + gid_num_sku[1];
				obj.buyer_message = this.buyer_message;
				this.method = 'order/createOrder';
				obj.shipping_type = this.shipping_type;
				let addOrder = this.tui.request('api/order/createOrder', 'post', obj, 1000, 1, '','createOrder');
				Promise.resolve(addOrder).then((value) => {
					if (value.code == 200) {

						if (value.data.success == 1) {
							this.tui.toast("支付成功!");
							setTimeout(() => {
								uni.switchTab({
									url: '../my/my'
								});
							}, 1000)
							return;
						} else {
							//删除购物车
							this.out_trade_no = value.data.out_trade_no;
							/*拉起支付*/

						}

					} else {
						this.tui.toast(value.message);
					}
				})
			},
			navs() {
				this.isopen = true
				this.showTabbar = false
			},
			openModel() {
				this.open_wallet = true;
			},
			closeOpen() {
				this.isopen = false
				this.showTabbar = true
			},
			showPopup: function() {
				this.popupShow = true;
			},
			hidePopup: function() {
				this.popupShow = false;
			},
			goBack() {
				uni.navigateBack()
			},
			connectPurse() {
				this.showPurse = true
			},
			closePurse() {
				this.showPurse = false
			},
			showDialog() {
				this.showLink = true
			},
			closeLink() {
				this.showLink = false
			},
			closePop() {
				this.open_wallet = false;
			},
			showTips: function(msg, type) {

				let options = {
					msg: msg,
					duration: 2000,
					type: type
				};
				this.$refs.toast.showTips(options);
			},

		}
	}
</script>

<style lang="scss">
	@import '../../static/css/defalut.css';
	// page {
	// 	// background-color: #0c0d13;
	// 	color: #fff;
	// 	font-family: "Barlow Semi Condensed", sans-serif;
	// 	// font-size: 1.3vw;
	// 	margin: 0;
	// 	padding: 0;
	// 	overflow: hidden;
	// }

	.container {
		padding-bottom: 110rpx;
	}


	.top-none {
		padding-top: 0px !important;
	}

	.tui-remark {
		flex: 1;
		font-size: 26rpx;
		padding-left: 64rpx;
	}
    .tui-addr-save {
    	padding: 24rpx;
    	margin-top: 100rpx;
    }
	.tui-remark-box {
		padding: 26rpx 30rpx;
	}

	.view-box {
		width: 100%;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 995;
	}

	.pl24 {
		padding-left: 12px;
	}

	.h32 {
		height: 16px;
	}

	.close {
		background: rgba(0, 0, 0, 0) url(../../static/images/common/close.svg) center no-repeat;
		width: 40rpx;
		height: 40rpx;
	}

	.w32 {
		width: 16px;
	}

	.point-price {
		font-size: 34rpx;
	}

	.yui-point-price {
		font-size: 30rpx;
		color: #f5b82b
	}

	.tui-popup-box-center-small {
		font-size: 24rpx;
		color: #f79229
	}

	.yui-attr-box {
		background-color: rgb(253, 235, 224);
		margin: 0rpx 28rpx;
		border-radius: 20rpx;
	}

	.tui-popup-box-center {
		text-align: center;
		margin-top: 40rpx;
		margin-bottom: 40rpx;
		font-size: 30rpx !important;
	}

	.yui-model-pick-list {
		font-size: 28rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
		color: #333;
	}

	.view {
		width: 100%;
		font-size: 18px;
		line-height: 18px;
		font-weight: 500;
		height: 32px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.yui-model-spec-list {
		margin-left: 30rpx;
		margin-bottom: 30rpx;
	}

	.sele-list-block {
		display: inline-block;
		margin-bottom: 16rpx;
	}

	.concne-one-texts {
		margin-top: 32rpx;
		font-size: 24rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		margin-bottom: 20rpx;
		line-height: 32rpx;
		color: #1f1f1f;
	}

	.concne-one-span {

		background: rgba(169, 169, 169, 0.24);
		border-radius: 16rpx;
		padding: 6rpx 20rpx;
		font-size: 24rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		line-height: 32rpx;
		color: #333333;
		margin-right: 20rpx;
	}

	.concne-one-span2 {

		background: rgba(253, 168, 174, 0.2);
		border-radius: 16rpx;
		padding: 6rpx 20rpx;
		font-size: 24rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		line-height: 32rpx;
		color: #f73333;
		margin-right: 20rpx;
	}

	.price-title {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.view-icon {
		position: fixed;
		top: 0;
		left: 10px;
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		height: 32px;
		transform: translateZ(0);
		z-index: 9999;
	}

	.dh-icon {
		width: 74%;
		align-items: center;
		margin-top: 14%;
		margin-left: 14%;
		height: 74%;
	}

	.container {
		padding-bottom: 98rpx;
	}

	.tui-box {
		margin: 20rpx;
		padding: 20rpx 0 118rpx;
		box-sizing: border-box;
	}

	.tui-boxs {
		background: #212a36 !important;
		color: #fff !important;
		font-size: 24rpx !important;
	}

	.tui-address {
		min-height: 80rpx;
		padding: 10rpx 0;
		box-sizing: border-box;
		position: relative;
	}

	.tui-userinfo {
		font-size: 30rpx;
		font-weight: 500;
		line-height: 30rpx;
		padding-bottom: 12rpx;
	}

	.tui-name {
		padding-right: 40rpx;
	}

	.coin-nums {
		color: #f5b82b;
		font-weight: bold;
	}

	.tui-goods-info {
		background: #212a36 !important;
	}

	.tui-addr {
		font-size: 24rpx;
		word-break: break-all;
		padding-right: 25rpx;
	}

	.tui-addr-tag {
		padding: 5rpx 8rpx;
		flex-shrink: 0;
		background: #EB0909;
		color: #212a36;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		font-size: 25rpx;
		line-height: 25rpx;
		transform: scale(0.8);
		transform-origin: 0 center;
		border-radius: 6rpx;
	}

	.tui-bg-img {
		position: absolute;
		width: 100%;
		height: 8rpx;
		left: 0;
		bottom: 0;
		background: url("") repeat;
	}

	.tui-top {
		margin-top: 20rpx;
		overflow: hidden;
	}

	.tui-goods-title {
		font-size: 28rpx;
		display: flex;
		align-items: center;
	}

	.tui-padding {
		box-sizing: border-box;
	}

	.tui-goods-item {
		width: 100%;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
	}

	.tui-goods-img {
		width: 180rpx;
		height: 180rpx;
		display: block;
		flex-shrink: 0;
	}

	.tui-goods-center {
		flex: 1;
		padding: 20rpx 8rpx;
		box-sizing: border-box;
	}

	.tui-goods-name {
		max-width: 310rpx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		font-size: 26rpx;
		line-height: 32rpx;
	}

	.tui-goods-attr {
		font-size: 22rpx;
		color: #888888;
		line-height: 32rpx;
		padding-top: 20rpx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.tui-price-right {
		text-align: right;
		font-size: 24rpx;
		color: #888888;
		line-height: 30rpx;
		padding-top: 20rpx;
	}

	.tui-flex {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 26rpx;
	}

	.tui-total-flex {
		justify-content: flex-end;
	}

	.tui-color-red,
	.tui-invoice-text {
		color: #ffad10;
		padding-right: 30rpx;
	}

	.tui-balance {
		font-size: 28rpx;
		font-weight: 500;
	}

	.tui-black {
		color: #bcbcbc;
		line-height: 30rpx;
	}

	.tui-gray {
		color: #888888;
		font-weight: 400;
	}

	.tui-light-dark {
		color: #666;
	}

	.tui-goods-price {
		display: flex;
		align-items: center;
		padding-top: 20rpx;
	}

	.tui-size-26 {
		font-size: 26rpx;
		line-height: 26rpx;
	}

	.tui-price-large {
		font-size: 34rpx;
		line-height: 32rpx;
		font-weight: 600;
	}

	.tui-flex-end {
		display: flex;
		align-items: flex-end;
		padding-right: 0;
	}

	.tui-phcolor {
		color: #B3B3B3;
		font-size: 26rpx;
	}



	.tui-remark {
		flex: 1;
		font-size: 26rpx;
		padding-left: 64rpx;
	}

	.tui-scale-small {
		transform: scale(0.8);
		transform-origin: 100% center;
	}

	.tui-scale-small .wx-switch-input {
		margin: 0 !important;
	}


	.tui-tabbar {
		width: 100%;
		height: 98rpx;
		background: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		font-size: 26rpx;
		box-shadow: 0 0 1px rgba(0, 0, 0, .3);
		padding-bottom: env(safe-area-inset-bottom);
		z-index: 996;
	}

	.tui-pr-30 {
		padding-right: 30rpx;
	}

	.tui-pr-20 {
		padding-right: 20rpx;
	}

	.tui-none-addr {
		height: 80rpx;
		padding-left: 5rpx;
		display: flex;
		align-items: center;
	}

	.tui-addr-img {
		width: 36rpx;
		height: 46rpx;
		display: block;
		margin-right: 15rpx;
	}


	.tui-pr25 {
		padding-right: 25rpx;
	}

	.tui-safe-area {
		height: 1rpx;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.view-icon .tui-badge {
		background: #e41f19 !important;
		position: absolute;
		right: -4px;
	}

	.pro-nt {
		background: rgba(0, 0, 0, 0.2);
		width: 76rpx;
		height: 76rpx;
		border-radius: 10rpx;
		margin-left: -12rpx;
		margin-right: 20rpx;
	}

	.tui-icon-ml {
		margin-left: 20rpx;
	}

	.tui-icon-box {
		position: relative;
		height: 20px !important;
		width: 20px !important;
		padding: 6px !important;

		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tui-banner-swiper {
		margin: 20rpx;
		margin-bottom: 0rpx;
		position: relative;
	}

	.price-box {
		background: linear-gradient(to left, #ff3b00, #ff0018);
		height: 112rpx;
		line-height: 34rpx !important;
	}

	.pro-prices {
		display: flex;
	}

	.pro-price {
		color: #fff
	}

	.normal-price {
		font-size: 46rpx;
	}

	.normal-prices {
		font-size: 30rpx;
	}

	.pro-price-nm {
		font-size: 32rpx;
		font-weight: bold;
	}

	.coupon_voucher {
		width: 100%;
		display: flex;
		color: #c88717;
		/* background:linear-gradient(to left, #f5f4f0, #fffffb); */
		background: #f3a229;
		padding: 6rpx 30rpx;
		border-top: 6px solid;
		box-shadow: 0 0 6px 0 rgba(0, 0, 0, .1);
		border-radius: 6px;
	}

	.tui-coupon-item-right {
		flex: 1;
		height: 150rpx;
		position: relative;
		z-index: 2;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-left: 24rpx;
		box-sizing: border-box;
		overflow: hidden;
	}

	.font12 {
		font-size: 26rpx;
	}

	.tui-coupon-item-left {
		width: 358rpx;
		/* 		height: 110rpx; */
		position: relative;
		z-index: 2;
		display: flex;
		align-items: center;
		/* justify-content: center; */
		/* 	flex-direction: column; */
		flex-shrink: 0;
	}

	.tui-coupon-intro {
		margin-top: 4rpx;
		padding: 4px 5px;
		font-size: 24rpx;
		color: #ffffff
	}

	.tui-coupon-price-box {
		display: flex;
		color: #ffffff;
		align-items: flex-end;
	}

	.tui-coupon-price-sign {
		font-size: 30rpx;
	}

	.tui-coupon-price {
		font-size: 66rpx;
		line-height: 68rpx;
		font-weight: bold;
	}

	.tui-price-small {
		font-size: 58rpx !important;
		line-height: 56rpx !important;
	}

	.line-through {
		font-size: 26rpx;
		line-height: 1rpx;
		text-decoration: line-through;
		color: #fff;
		opacity: .9;
		font-weight: normal;
	}

	.tui-banner-tag {
		position: absolute;
		color: #fff;
		bottom: 30rpx;
		right: 0;
	}

	.tui-slide-image {
		width: 100%;
		display: block;
	}

	/*顶部菜单*/

	.tui-menu-box {
		box-sizing: border-box;
	}

	.tui-menu-header {
		font-size: 34rpx;
		color: #fff;
		height: 32px;
		display: flex;
		align-items: center;
	}

	.tui-btn-coupon {
		margin: 20rpx 40rpx;
	}

	.coupon-title {
		text-align: center;
		margin-bottom: 30rpx;
	}

	.tui-coupon-radio {
		transform: scale(0.7);
		transform-origin: 100% center;
	}

	.tui-coupon-content {
		width: 82%;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.tui-coupon-title-box {
		display: flex;
		align-items: center;
	}

	.tui-coupon-btn {
		padding: 12rpx 18rpx;
		background: #b15a11;
		color: #fff;
		border-radius: 24rpx;
		font-size: 25rpx;
		/* 	line-height: 25rpx; */
		display: flex;
		align-items: center;
		justify-content: center;
		transform: scale(0.9);
		transform-origin: 0 center;
		flex-shrink: 0;
	}

	.tui-menu-itembox {
		color: #fff;
		padding: 40rpx 10rpx 0 10rpx;
		box-sizing: border-box;
		display: flex;
		flex-wrap: wrap;
		font-size: 26rpx;
	}

	.tui-menu-item {
		width: 22%;
		height: 160rpx;
		border-radius: 24rpx;
		display: flex;
		align-items: center;
		/* flex-direction: column; */
		justify-content: center;
		background: rgba(0, 0, 0, 0.4);
		margin-right: 4%;
		margin-bottom: 4%;
	}

	.tui-menu-item:nth-of-type(4n) {
		margin-right: 0;
	}

	.item-left-m:nth-child(2n) {
		margin-left: 20rpx;
		border-left: 1px dashed #f1f1f1;
		padding-left: 20rpx;
	}

	.tui-badge-box {
		position: relative;
	}

	.tui-badge-box .tui-badge-class {
		position: absolute;
		top: -8px;
		right: -8px;
	}

	.tui-msg-badge {
		top: -10px;
	}

	.tui-icon-up_box {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tui-menu-text {
		padding-top: 12rpx;
	}

	.tui-opcity .tui-menu-text,
	.tui-opcity .tui-badge-box {
		opacity: 0.5;
		transition: opacity 0.2s ease-in-out;
	}

	/*顶部菜单*/

	/*内容 部分*/

	.tui-padding {
		// padding: 0 30rpx;
		box-sizing: border-box;
	}

	.tui-ml-auto {
		margin-left: auto;
	}

	/* #ifdef H5 */
	.tui-ptop {
		padding-top: 44px;
	}

	/* #endif */

	.tui-size {
		font-size: 24rpx;
		line-height: 24rpx;
	}

	.tui-gray {
		color: #999;
	}

	.tui-icon-red {
		color: #ff201f;
	}

	.tui-border-radius {
		border-bottom-left-radius: 24rpx;
		border-bottom-right-radius: 24rpx;
		overflow: hidden;
	}

	.tui-radius-all {
		border-radius: 24rpx;
		overflow: hidden;
	}

	.tui-mtop {
		margin-top: 26rpx;
	}

	.tui-pro-detail {
		box-sizing: border-box;
		color: #333;
		margin: 20rpx;
		margin-top: 0rpx;
	}

	.tui-product-title {
		background: #212a36;
		color: #fff;
		padding: 30rpx 0;
	}

	.tui-pro-pricebox {
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #f4d56f;
		font-size: 36rpx;
		font-weight: bold;
		line-height: 44rpx;
	}

	.tui-pro-price {
		display: flex;
		justify-content: left;
		align-items: center;
	}

	.tui-coin {
		margin-top: 10rpx;
		margin-left: 10rpx;
	}

	.tui-price {
		font-size: 58rpx;
	}

	.tui-original-price {
		font-size: 26rpx;
		line-height: 26rpx;
		padding: 10rpx 30rpx;
		box-sizing: border-box;
	}

	.tui-line-through {
		text-decoration: line-through;
	}

	.tui-collection {
		color: #333;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		height: 44rpx;
	}

	.tui-scale-collection {
		transform: scale(0.7);
		transform-origin: center 90%;
		line-height: 24rpx;
		font-weight: normal;
		margin-top: 4rpx;
	}

	.tui-pro-titbox {
		font-size: 32rpx;
		font-weight: 500;
		position: relative;
		padding: 0 150rpx 0 30rpx;
		box-sizing: border-box;
	}

	.tui-pro-title {
		padding-top: 20rpx;
	}

	.tui-share-btn {
		display: block;
		background: transparent;
		margin: 0;
		padding: 0;
		border-radius: 0;
		border: 0;
	}

	.tui-share-btn::after {
		border: 0;
	}

	.tui-share-box {
		display: flex;
		align-items: center;
	}

	.tui-share-position {
		position: absolute;
		right: 0;
		top: 30rpx;
	}

	.tui-share-text {
		padding-left: 8rpx;
	}

	.tui-sub-title {
		padding: 20rpx 0;
		line-height: 32rpx;
	}

	.tui-sale-info {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-top: 30rpx;
	}

	.tui-discount-box {
		background: #fff;
	}

	.tui-list-cell {
		width: 100%;
		position: relative;
		display: flex;
		align-items: center;
		font-size: 26rpx;
		line-height: 26rpx;
		padding: 36rpx 30rpx;
		box-sizing: border-box;
	}

	.tui-right {
		position: absolute;
		right: 30rpx;
		top: 30rpx;
	}

	.tui-top40 {
		top: 40rpx !important;
	}

	.tui-bold {
		font-weight: bold;
	}

	.bottom {
		margin-bottom: 100rpx;
	}

	.tui-list-cell::after {
		content: '';
		position: absolute;
		border-bottom: 1rpx solid #394951;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		bottom: 0;
		right: 0;

		// left: 126rpx;
	}

	.tui-last::after {
		border-bottom: 0 !important;
	}

	.tui-flex-center {
		display: flex;
		align-items: center;
	}


	.tui-cell-title {
		width: 66rpx;
		padding-right: 30rpx;
		flex-shrink: 0;
	}

	.goods-button {
		width: 100%;
		line-height: 80rpx;
		;

		border-radius: .4em;
		background-color: #f4d56f;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;

	}

	.tui-promotion-box {
		display: flex;
		align-items: center;
		padding: 10rpx 0;
		width: 80%;
	}

	.tui-promotion-box text {
		width: 70%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.tui-basic-info {
		background: #fff;
	}

	.tui-addr-box {
		width: 76%;
	}

	.tui-addr-item {
		padding: 10rpx;
		line-height: 34rpx;
	}

	.tui-guarantee {
		background: #fdfdfd;
		display: flex;
		flex-wrap: wrap;
		padding: 20rpx 30rpx 30rpx 30rpx;
		font-size: 24rpx;
	}

	.tui-guarantee-item {
		color: #999;
		padding-right: 30rpx;
		padding-top: 10rpx;
	}

	.tui-pl {
		padding-left: 4rpx;
	}

	.tui-cmt-box {
		background: #fff;
	}

	.tui-between {
		justify-content: space-between !important;
	}

	.tui-cmt-all {
		color: #ff201f;
		padding-right: 8rpx;
	}

	.tui-cmt-content {
		font-size: 26rpx;
	}

	.tui-cmt-user {
		display: flex;
		align-items: center;
	}

	.tui-acatar {
		width: 60rpx;
		height: 60rpx;
		border-radius: 30rpx;
		display: block;
		margin-right: 16rpx;
	}

	.tui-cmt {
		padding: 14rpx 0;
	}

	.tui-attr {
		font-size: 24rpx;
		color: #999;
		padding: 6rpx 0;
	}

	.tui-cmt-btn {
		padding: 50rpx 0 30rpx 0;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tui-nomore-box {
		padding-top: 10rpx;
	}

	.tui-product-img {
		margin-top: 40rpx;
		display: flex;
		padding: 20rpx;
		font-size: 24rpx;
		min-height: 500rpx;
		background: #212a36;
		color: #fff;
		flex-direction: column;
		transform: translateZ(0);
	}

	.tui-product-img image {
		width: 100%;
		display: block;
	}

	/*底部操作栏*/

	.tui-col-7 {
		width: 58.33333333%;
	}

	.tui-col-12 {
		width: 100%;
	}

	.tui-col-5 {
		width: 41.66666667%;
	}

	.tui-operation {

		margin: 20rpx;

		background-color: #f4d56f;
		border-radius: 20rpx;
		margin-top: 20rpx;


		align-items: center;
		justify-content: space-between;


	}

	.tui-safearea-bottom {
		width: 100%;
		height: env(safe-area-inset-bottom);
	}



	.tui-scale-small {
		transform: scale(0.9);
		transform-origin: center center;
	}

	.tui-operation-right {
		height: 80rpx;
		padding-top: 0;
	}

	.tui-right-flex {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tui-flex-1 {
		flex: 1;
		padding: 16rpx;
	}

	/*底部操作栏*/

	/*底部选择弹层*/

	.tui-popup-class {
		border-top-left-radius: 24rpx;
		border-top-right-radius: 24rpx;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.tui-popup-box {
		background: #212a36;
		position: relative;
		padding: 30rpx 0 100rpx 0;
	}

	.tui-popup-btn {
		width: 100%;
		position: absolute;
		left: 0;
		bottom: 0;
	}

	/* .tui-popup-btn .tui-btn-class {
    	width: 90% !important;
    	display: block !important;
    	font-size: 28rpx !important;
    } */

	/* .tui-icon-close {
    	position: absolute;
    	top: 30rpx;
    	right: 30rpx;
    } */

	.tui-product-box {
		display: flex;
		align-items: flex-end;
		font-size: 24rpx;
		padding-bottom: 30rpx;
	}

	.tui-popup-img {
		height: 200rpx;
		width: 200rpx;
		border-radius: 24rpx;
		display: block;
	}

	.tui-popup-price {
		padding-left: 20rpx;
		padding-bottom: 8rpx;
	}

	.tui-amount {
		color: #f4d56f;
		font-size: 36rpx;
	}

	.tui-number {
		font-size: 24rpx;
		line-height: 24rpx;
		padding-top: 12rpx;
		color: #999;
	}

	.tui-popup-scroll {

		font-size: 26rpx;
	}

	.tui-scrollview-box {
		padding: 0 30rpx 60rpx 30rpx;
		box-sizing: border-box;
	}

	.tui-attr-title {
		padding: 10rpx 0;
		color: #333;
	}

	.tui-attr-box {
		font-size: 0;
		padding: 20rpx 0;
	}

	.tui-attr-item {
		max-width: 100%;
		min-width: 200rpx;
		height: 64rpx;
		display: -webkit-inline-flex;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		background: #f7f7f7;
		padding: 0 26rpx;
		box-sizing: border-box;
		border-radius: 32rpx;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
		font-size: 26rpx;
	}

	.tui-attr-active {
		background: #fcedea !important;
		color: #e41f19;
		font-weight: bold;
		position: relative;
	}

	.tui-attr-active::after {
		content: '';
		position: absolute;
		border: 1rpx solid #e41f19;
		width: 100%;
		height: 100%;
		border-radius: 40rpx;
		left: 0;
		top: 0;
	}

	.tui-number-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 0 30rpx 0;

		box-sizing: border-box;
	}

	.bottom {

		display: flex;
		flex: 1;
		flex-direction: column;
		height: calc(100vh - var(--window-top));
		width: 100%;
		background-color: #0c0d13;
	}

	.golden-title {

		color: #f4d56f;
		font-family: Barlow Semi Condensed;
		font-weight: 500;
		line-height: 56rpx;
		text-shadow: 0 4rpx 8rpx rgba(3, 3, 3, .5);
		width: 750rpx;
		text-align: center;
		font-style: italic;

	}

	.golden-title text {
		justify-content: center;
		margin-top: 2rpx;
		font-size: 48rpx
	}

	/* 商品列表*/

	.tui-product-list {
		margin: 20rpx;
		margin-top: 20rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		flex-wrap: wrap;
		box-sizing: border-box;
		/* padding: 10rpx 0rpx; */
	}


	.tui-product-container {
		width: 49%;
		/* 	display: flex;
    	justify-content: space-between;
    	flex-wrap: wrap;
    	flex: 1; */
		margin-right: 2%;
	}

	.yui-pricebox {
		font-size: 26rpx;
		margin-left: 4rpx;
		margin-top: 4rpx;
	}

	.tui-product-container:nth-child(2n) {
		margin-right: 0;
	}


	.tui-pro-item {
		width: 100%;
		margin-bottom: 10rpx;
		background: #212a36;
		box-sizing: border-box;
		border-radius: 12rpx;
		overflow: hidden;
		transition: all 0.15s ease-in-out;
	}

	.tui-flex-list {
		display: flex;
		margin-bottom: 1rpx !important;
	}

	.tui-pro-img {
		width: 100%;
		display: block;
	}

	.tui-proimg-list {
		width: 260rpx;
		height: 260rpx !important;
		flex-shrink: 0;
		border-radius: 12rpx;
	}

	.tui-pro-content {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 20rpx;
	}

	.tui-pro-tit {
		color: #777777;
		font-size: 26rpx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}



	.tui-sale-price {
		display: flex;
		font-size: 30rpx;
		font-weight: 500;
		color: #f4d56f;
	}

	.tui-sale-prices {
		font-size: 28rpx;
		font-weight: 500;
		color: #e41f19;
	}

	.tui-factory-price {
		font-size: 24rpx;
		color: #a0a0a0;
		text-decoration: line-through;
		padding-left: 12rpx;
	}

	.tui-pro-pay {
		padding-top: 10rpx;
		font-size: 24rpx;
		color: #656565;
	}

	.affiliate_page .top_link.right .link_btn_img_box {
		width: 70rpx;
		height: 48rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 8rpx;
		border: solid 2rpx rgba(244, 213, 111, .7);
		background-color: rgba(37, 31, 20, .5);
	}

	.affiliate_page .top_link.right .link_btn_img_box_active {
		width: 68rpx;
		height: 48rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 8rpx;
		border: solid 2rpx rgba(255, 255, 255, .7);
		background-color: #251f14;
	}

	.affiliate_page .top_link.right .link_btn_img_box_active image {
		width: 70%;
		height: 100%;
	}

	.affiliate_page .top_link.right .link_btn_img_box image {
		width: 70%;
		height: 100%;
	}

	image {
		overflow-clip-margin: content-box;
		overflow: clip;
	}

	.buy {
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		display: flex;
		flex-direction: row;

	}

	.button_buy {
		background-color: #f4d56f;
		width: 200rpx;
	}
</style>